<template>
  <el-row>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content">
        <double-bar-chart :chart-data="barData" title="用户性别年龄分布" tool-name="人数" />
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content">
        <pie-chart :chart-data="pieData" title="用户咨询科室占比" tool-name="人数"/>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content">
        <map-chart :chart-data="mapData" title="用户地域分布图" tool-name="用户量"/>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content">
        <word-cloud-chart :chart-data="wordCloudData" title="热门疾病搜索"/>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import DoubleBarChart from '@/components/Charts/doublebarChart'
import MapChart from '@/components/Charts/mapChart'
import PieChart from '@/components/Charts/pieChart'
import WordCloudChart from '@/components/Charts/wordCloudChart'

export default {
  components: {
    DoubleBarChart,
    MapChart,
    PieChart,
    WordCloudChart
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      barData: [],
      mapData: [],
      pieData: [],
      wordCloudData: []
    }
  },
  watch: {
    data(val) {
      this.barData = [
        { name: '19岁以下', male: 45, female: 23 },
        { name: '20-29岁', male: 23, female: 44 },
        { name: '30-39岁', male: 65, female: 24 },
        { name: '40-49岁', male: 45, female: 34 },
        { name: '50岁以上', male: 23, female: 36 }
      ]
      this.pieData = [
        { name: '儿科', value: 310 },
        { name: '内科', value: 234 },
        { name: '外科', value: 135 },
        { name: '眼科', value: 467 },
        { name: '产科', value: 335 },
        { name: '妇科', value: 23 },
        { name: '耳鼻咽喉科', value: 123 },
        { name: '精神心理科', value: 67 }
      ]
      this.mapData = this.data.provinces
      this.wordCloudData = [
        { name: '感冒', value: 30 },
        { name: '胃痛', value: 24 },
        { name: '心脏病', value: 21 },
        { name: '鼻炎', value: 3 },
        { name: '焦虑', value: 67 },
        { name: '高血压', value: 12 },
        { name: '低血糖', value: 12 },
        { name: '发烧', value: 19 },
        { name: '精神病', value: 7 },
        { name: '过敏', value: 76 },
        { name: '肺癌', value: 23 },
        { name: '呼吸道感染', value: 46 },
        { name: '糖尿病', value: 54 },
        { name: '乙肝', value: 43 },
        { name: '艾滋病', value: 63 },
        { name: '白血病', value: 123 },
        { name: '咽炎', value: 33 },
        { name: '气管炎', value: 12 },
        { name: '淋巴癌', value: 43 },
        { name: '扁桃体炎', value: 12 },
        { name: '哮喘', value: 31 },
        { name: '湿疹', value: 91 },
        { name: '荨麻疹', value: 48 },
        { name: '脚气', value: 57 },
        { name: '水痘', value: 52 },
        { name: '灰指甲', value: 12 },
        { name: '麻风', value: 42 },
        { name: '痔疮', value: 51 },
        { name: '营养不良', value: 46 },
        { name: '肥胖症', value: 62 },
        { name: '贫血', value: 12 },
        { name: '骨折', value: 68 }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-content{
  height:350px;
  background:#fff;
  padding: 10px 10px 0;
  margin: 0px 10px 20px 10px;
}
</style>
